{{! This is the post loop - each post will be output using this markup }}

<style type="text/css">
    .post-pic {
        float: left;
        margin-right: 20px;
        width: 165px;
        height: 140px;
        background: no-repeat center center;
        background-size: cover;
    }

    .post-loading {
        text-align: center;
    }

</style>

<div id="posts-content" >
    {{#foreach posts}}
    <article class="{{post_class}}">
        {{!有封面的时候展示封面}}
        {{#if image}}
        <a class="post-pic hidden-xs" href="{{url}}" style="background-image: url({{image}});"></a>
        {{/if}}

        <header class="post-header">
            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
        </header>
        <section class="post-excerpt">
            <p>{{excerpt characters="140"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
        </section>
        <footer class="post-meta">
            {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
            {{author}}
            {{tags prefix="&nbsp;<i class=\"fa fa-tags\"></i>&nbsp;"}}
            <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY年MM月DD日"}}</time>
        </footer>

    </article>
    {{/foreach}}

    {{pagination}}

</div>

<script src="{{asset "js/jquery.infinitescroll.min.js"}}"></script>
<script>
    $(document).ready(function (){
        $('#posts-content').infinitescroll({
            navSelector  : "nav.pagination",
            nextSelector : "nav.pagination a:last",
            itemSelector : "article",
            animate : false,
            bufferPx: 5,
            extraScrollPx: 50,
            loading: {
                speed: 'fast',
                selector: null,
                msgText: '加载中...',
                finishedMsg:'<div class="post-loading">没有更多了</div>'
            }
        });
    });
</script>